import React from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute} from 'react-router';
import moment from 'moment';

import View from 'lib/View.jsx';
import Tab from 'lib/components/tab.jsx';

import Layout from '../common/layout.jsx';
import history from '../common/history.es6';

import MetaView from './Meta/MainView.jsx';
import VirtualView from './Virtual/MainView.jsx';
import UserPropertyModal from './UserPropertyModal.jsx';

require('./style.less');

class MainView extends View {
  constructor(props, context) {
    super(props, context);

    this.releaseDate = moment('2016-02-23');
  }

  handleMountUserPropertyModal() {
    UserPropertyModal.mount();
  }

  render(){
    let subTitle = '数据管理' + (moment().valueOf() > this.releaseDate.add(60, 'days').valueOf() ? '' : '（Beta）');

    return (
      <Layout title="数据管理" subtitle={ subTitle } hideTime={ true } hideVersion={ true }>
        <div className="box event-settings">
          <a href="javascript:;" className="btn-user-property btn-green" onClick={ this.handleMountUserPropertyModal.bind(this) }>编辑用户属性</a>
          <Tab tabActive={1}>
            <Tab.Panel title="元事件">
              <MetaView />
            </Tab.Panel>
            <Tab.Panel title="虚拟事件">
              <VirtualView />
            </Tab.Panel>
          </Tab>
        </div>
      </Layout>
    )
  }
}

render((
  <Router history={ history }>
    <Route path="/" component={ MainView } />
  </Router>
), document.getElementById('root'));
